<!-- 精彩活动 -->
<template>
  <div class="curriculum-resources-container">
    <header>
      <el-form ref="search" :model="searchForm" inline label-width="100px">
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item label="订单号" prop="orderSn">
              <el-input v-model="searchForm.orderSn" type="text" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="会员名称" prop="memberName">
              <el-input v-model="searchForm.memberName" type="text" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单类型" prop="orderType">
              <el-select v-model="searchForm.orderType" placeholder="请选择" clearable>
                <el-option
                    v-for="item in orderTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="searchForm.orderStatus" placeholder="请选择" clearable>
                <el-option
                    v-for="item in orderStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button @click="SearchReset('search')">重置</el-button>
              <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button>
              <!-- <el-button type="primary" @click="CreateForm">新增充值规则</el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </header>
    <article>
      <Table
          :table-data="tableConfig.data.list"
          :table-column-options="tableConfig.columns"
          :table-data-total="tableConfig.data.total"
          :page="searchForm.pageNum"
          :size="searchForm.pageSize"
          @tableUpdate="CurrentChange"
      >
        <template #timeroperation="{ data }">
          <span>{{ data.createTime | formDate }}</span>
        </template>
        <template #typeoperation="{ data }">
          <span>{{ data.orderType == 1 ? '空间订单' : '充值订单' }}</span>
        </template>
        <template #statusoperation="{ data }">
          <span>{{
              data.orderStatus == 0 ? '待付款' : data.orderStatus == 3 ? '已完成' : data.orderStatus == 4 ? '已关闭' : data.orderStatus == 5 ? '无效订单' : ''
            }}</span>
        </template>
        <template #operation="{ data }">
          <!-- <el-button type="text" @click="TableEdit(data)">编辑</el-button> -->
          <!-- <el-button type="text" @click="TableDelete(data)">删除</el-button> -->
        </template>
      </Table>
    </article>
    <!-- create/edit form modal -->
    <el-dialog
        title="充值规则管理"
        :visible.sync="modalConfig.show"
        width="50%"
        destroy-on-close
        :before-close="() => FormCancel('formData')"
    >
      <el-form ref="formData" :model="modalConfig.formData" label-width="120px" label-position="right">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="modalConfig.formData.name" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="充值金额" prop="condition">
          <el-input v-model="modalConfig.formData.conditionBase" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="赠送金额" prop="conditionResult">
          <el-input v-model="modalConfig.formData.conditionResult" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="" style="text-align: right;">
          <el-button @click="FormCancel('formData')">取消</el-button>
          <el-button type="primary" @click="FormSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table/index'
import meetApi from '../../api/meet.js'
import userManage from '../../api/system/userManage.js'

export default {
  name: 'rechargeManage',
  components: {
    Table
  },
  data() {
    return {
      searchLoading: false,
      searchForm: {
        'pageNum': 1,
        'pageSize': 10
      },
      orderStatusOptions: [{
        value: 0,
        label: '待付款'
      }, {
        value: 3,
        label: '已完成'
      }, {
        value: 4,
        label: '已关闭'
      }, {
        value: 5,
        label: '无效订单'
      }],
      orderTypeOptions: [],
      tableConfig: {
        columns: [
          {
            label: '订单号',
            prop: 'orderSn',
            width: 100
          },
          {
            label: '会员名',
            prop: 'memberName',
            width: 100
          },
          {
            label: '订单金额',
            prop: 'totalAmount',
            width: 100
          },
          {
            label: '赠送金额',
            prop: 'semAmount',
            width: 100
          },
          {
            label: '订单类型',
            columnType: true,
            slotName: 'typeoperation',
            width: 100
          },
          {
            label: '订单状态',
            columnType: true,
            slotName: 'statusoperation',
            width: 100
          },
          {
            label: '订单日期',
            columnType: true,
            slotName: 'timeroperation',
            width: 100
          },
          {
            label: '操作',
            columnType: true,
            slotName: 'operation',
            width: 200
          }
        ],
        data: {
          list: []
        }
      },
      modalConfig: {
        title: '新增',
        show: false,
        formData: {
          "name": "",
          "conditionBase": '',
          "conditionResult": ''
        }
      }
    }
  },
  filters: {
    formDate(key) {
      function padZero(num) {
        return num < 10 ? '0' + num : num;
      }

      let date = new Date(key)
      var year = date.getFullYear();
      var month = padZero(date.getMonth() + 1); // 月份是从0开始的
      var day = padZero(date.getDate());

      var hours = padZero(date.getHours());
      var minutes = padZero(date.getMinutes());
      var seconds = padZero(date.getSeconds());

      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    }
  },
  async mounted() {
    this.TableList()
    this.checkIsMdadmin()
  },
  methods: {
    checkIsMdadmin() {
      this.$yAxios({
        url: userManage.isMdadmin
      }, info => {
        if (info) {
          this.orderTypeOptions = [{
            value: '1',
            label: '空间订单'
          }]
        } else {
          this.orderTypeOptions = [{
            value: '1',
            label: '空间订单'
          }, {
            value: '2',
            label: '充值订单'
          }]
        }

      })
    },
    TableList() {
      this.$yAxios({
        url: meetApi.queryOrder,
        data: this.searchForm,
      }, info => {
        this.tableConfig.data = info
      })
    },
    // 点击查询按钮
    SearchSubmit() {
      this.searchForm.pageNum = 1
      this.searchLoading = true
      setTimeout(() => {
        this.searchLoading = false
      }, 1000)
      this.TableList()
    },
    // 点击重置按钮
    SearchReset(name) {
      this.$refs[name].resetFields()
      this.TableList()
    },
    // 点击新增按钮
    CreateForm() {
      this.modalConfig.show = true
      delete this.modalConfig.formData.id
      this.modalConfig.formData = {
        "name": "",
        "condition": '',
        "conditionResult": ''
      }
    },
    // 分页数据回调
    CurrentChange(e) {
      this.searchForm.pageSize = e.size
      this.searchForm.pageNum = e.page
      this.TableList()
    },
    // 点击表格内删除
    async TableDelete(data) {
      this.$confirm('你确定要删除此条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$yAxios({
          url: meetApi.removeOrder,
          data: {ids: [data.id]},
          loading: true
        }, info => {
          this.TableList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击表格内编辑
    TableEdit(data) {
      this.modalConfig.show = true
      // Detail(data.id).then(res => {
      this.modalConfig.formData = data
      // })
    },
    // 点击表单确定
    FormSubmit() {
      this.$yAxios({
        url: meetApi.saveChargeRule,
        data: this.modalConfig.formData,
        loading: true
      }, info => {
        this.TableList()
        this.modalConfig.show = false
      })
    },
    // 点击表单取消
    FormCancel(name) {
      this.$refs[name].resetFields()
      this.modalConfig.show = false
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item__content {
  width: 100%;
}

.el-select {
  width: 100%;
}

.curriculum-resources-container {
  padding: 20px;
}

</style>
  